<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <el-card>
          <div class="center-title">地方补贴情况</div>
          <div class="type">
            <div class="typeItem">
              <div class="title">党小组数量</div>
              <div class="num">{{ djtjData.dlzsl }}</div>
            </div>
            <div class="typeItem">
              <div class="title">党员性别分析</div>
              <div ref="xbfxstats" class="num pie"></div>
            </div>
            <div class="typeItem">
              <div class="title">党员年龄分析</div>
              <div class="num">
                <div v-for="item in list" :key="item.title" class="table">
                  <div class="label">{{ item.title }}</div>
                  <div class="value">{{ item.num }}</div>
                </div>
              </div>
            </div>
            <!-- <div v-for="item in list" :key="item.title" class="typeItem">
              <div class="title">{{ item.title }}</div>
              <div class="num">{{ item.num }}亩</div>
            </div> -->
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div class="center-title">
            <div class="dyxx">党员信息</div>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="queryParams.name" clearbale placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
                <!-- <el-button sfzh="primary" icon="Search" @click="handleQuery">导出</el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <el-table class="zylbTable" :row-class-name="tableRowClassName" :highlight-current-row="false" :data="tableData" style="width: 100%">
            <el-table-column prop="name" width="160px" label="姓名" />
            <el-table-column prop="xb" label="性别" />
            <el-table-column prop="mz" label="民族" />
            <el-table-column prop="jg" label="籍贯" />
            <el-table-column prop="csrq" label="出生日期" />
            <el-table-column prop="nl" label="年龄" />
            <el-table-column prop="jtzz" label="家庭住址" />
          </el-table>
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="queryParams.total"
            background
            class="pagination"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const mapStore = useMapStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import * as echarts from 'echarts';
import 'echarts-gl';
const xbfxstats = ref();
const loading = ref(false);
const djtjData = ref({
  dlzsl: 0,
  nlfx: {},
  xbfx: {}
});
const queryParams = ref({
  name: '',
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const type = computed(() => {
  return mapStore.activeTab;
});
const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const list = ref([]);
const tableData = ref([
  {
    dm: '123',
    mc: '123',
    dr: '123',
    zs: '123',
    xymc: '123',
    szqy: '123',
    sjzs: '123123',
    hyml: '123'
  },
  {
    dm: '123',
    mc: '123',
    dr: '123',
    zs: '123',
    xymc: '123',
    szqy: '123',
    sjzs: '123123',
    hyml: '123'
  },
  {
    dm: '123',
    mc: '123',
    dr: '123',
    zs: '123',
    xymc: '123',
    szqy: '123',
    sjzs: '123123',
    hyml: '123'
  }
]);
const handleQuery = () => {
  init(true);
};
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init(false);
};
const init = async (flag) => {
  loading.value = true;
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  const params = {
    'ssc': useMapStore().szxcCountryText,
    ...queryParams.value
  };
  const data = await $szxcapi.dyQuery(params);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
  loading.value = false;
};
const initTj = async () => {
  const params = {
    'ssc': useMapStore().szxcCountryText
  };
  const data = await $szxcapi.djylTjQuery(params);
  djtjData.value = data.data;
  optionData.value = optionData.value.map((item) => {
    return {
      ...item,
      value: djtjData.value.xbfx[item.name]
    };
  });
  for (let key in djtjData.value.nlfx) {
    list.value.push({
      title: key,
      num: djtjData.value.nlfx[key]
    });
  }
  initChartPie();
};
var optionData = ref([
  {
    name: '男',
    value: 60
  },
  {
    name: '女',
    value: 44
  }
]);
onMounted(async () => {
  await nextTick();
  init(true);
  initTj();
});
onUnmounted(() => {
  if (xbfxstats.value) {
    echarts.dispose(xbfxstats.value);
  }
});

const initChartPie = async () => {
  const commandstatsIntance = echarts.init(xbfxstats.value, 'macarons');
  const option = await getPie3D(optionData.value, 0);

  commandstatsIntance.setOption(option);
  window.addEventListener('resize', () => {
    commandstatsIntance.resize();
  });
};

onUnmounted(() => {
  if (xbfxstats.value) {
    echarts.dispose(xbfxstats.value);
  }
});

const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;
  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;
  isSelected = false;
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20
    },

    x: function (u, v) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u, v) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    }
  };
};
const getPie3D = (pieData, internalDiameterRatio) => {
  const series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  const legendData = [];
  const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
  for (let i = 0; i < pieData.length; i += 1) {
    sumValue += pieData[i].value;
    const seriesItem = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k
      },
      itemStyle: {}
    };
    if (typeof pieData[i].itemStyle !== 'undefined') {
      const { itemStyle } = pieData[i];
      typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
      typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }
  for (let i = 0; i < series.length; i += 1) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      10 //在此处传入饼图初始高度h
    );
    startValue = endValue;
    legendData.push(series[i].name);
  }
  // 准备待返回的配置项，把准备好的series 传入。
  series.push({
    name: 'pie2d',
    type: 'pie',
    label: {
      position: 'inner',
      opacity: 1,
      lineHeight: 1,
      textStyle: {
        fontSize: 17,
        color: '#fff'
      }
    },
    startAngle: 300, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ['50%', '46%'],
    center: ['50%', '50%'],
    data: pieData,
    itemStyle: {
      opacity: 0
    }
  });
  const option = {
    color: ['#1cc5ca', '#6ce4f2'],
    animation: true,
    // legend: {
    //   icon: 'circle',
    //   orient: 'vertical',
    //   right: 0,
    //   itemGap: 25,
    //   itemWidth: 24,
    //   itemHeight: 14,
    //   itemRadius: 20,
    //   top: 'center',
    //   formatter: (name) => {
    //     if (optionData.value.length) {
    //       const item = optionData.value.filter((item) => item.name === name)[0];
    //       let str = `${name}`;
    //       return str;
    //     }
    //   },
    //   textStyle: {
    //     color: '#87A4BF',
    //     fontSize: 20
    //   }
    // },
    orient: 'vertical',
    // title: {
    //   x: 'center',
    //   top: '20',
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 22
    //   }
    // },
    tooltip: {
      formatter: (params) => {
        if (params.seriesName !== 'mouseoutSeries') {
          return `${params.marker}${params.seriesName}：${optionData.value[params.seriesIndex].value}`;
        }
        return '';
      }
    },
    labelLine: {
      show: true,
      length: 10,
      length2: 140,
      lineStyle: {
        width: 2
      }
    },
    label: {
      show: true,
      padding: [0, 0, 0, 0],
      formatter: function (optionsData) {
        return '{value|' + optionsData.percent.toFixed(0) + '%}';
      },
      rich: {
        value: {
          fontSize: 17,
          color: '#ffffff',
          padding: [-20, -20, 0, 0]
        }
      },
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    xAxis3D: {
      min: -1,
      max: 1
    },
    yAxis3D: {
      min: -1,
      max: 1
    },
    zAxis3D: {
      min: -1,
      max: 1
    },
    grid3D: {
      show: false,
      boxHeight: 22, //修改立体饼图的高度
      top: '-16%',
      left: '0%',
      viewControl: {
        // 3d效果可以放大、旋转等，
        alpha: 40, //饼图翻转的程度
        beta: 34,
        rotateSensitivity: 1,
        zoomSensitivity: 0,
        panSensitivity: 0,
        autoRotate: false, //是否自动旋转
        distance: 230 //距离越小看到的饼图越大
      }
    },
    series
  };
  return option;
};
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .center-title {
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin-bottom: 14px;
    .dyxx {
      margin-bottom: 14px;
    }
  }
  .el-card {
    max-height: calc(90vh - 470px) !important;
    background: #178af01a;
    border: none;
    overflow: hidden auto;
    .el-pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // align-items: center;
      border-radius: 5px;
      font-size: 26px;
      .title {
        margin-top: 14px;
        margin-left: 20px;
      }
      .num {
        flex: 1;
      }
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .num {
        text-align: center;
        margin-top: 30px;
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .pie.num {
        flex: 1;
        height: 100%;
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .num {
        padding: 20px 0 0 0;
        .table {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color: #fff;
          .label {
            width: 100px;
            text-align: center;
            flex-shrink: 0;
            padding: 0 12px 0px 0px;
          }
          .value {
            padding-left: 10px;
          }
        }
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(5) {
      background: rgb(109, 62, 236);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(6) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
  }
  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
}
</style>
